/**
 * 性能优化工具函数
 */

/**
 * 图片懒加载指令
 * 用法：v-lazy="图片url"
 */
export const lazyLoad = {
	install(app) {
		// 图片懒加载指令
		app.directive('lazy', {
			mounted(el, binding) {
				const observer = new IntersectionObserver(
					entries => {
						entries.forEach(entry => {
							if (entry.isIntersecting) {
								// 元素进入视口，加载图片
								el.src = binding.value
								observer.unobserve(el)
							}
						})
					},
					{
						rootMargin: '100px',
					}
				)
				observer.observe(el)
			},
		})
	},
}

/**
 * 防抖函数 - 用于减少高频事件触发次数
 * @param {Function} fn - 要执行的函数
 * @param {Number} delay - 延迟时间，单位毫秒
 * @returns {Function} - 防抖处理过的函数
 */
export function debounce(fn, delay = 300) {
	let timer = null
	return function (...args) {
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
			fn.apply(this, args)
		}, delay)
	}
}

/**
 * 节流函数 - 用于限制高频事件的执行频率
 * @param {Function} fn - 要执行的函数
 * @param {Number} delay - 延迟时间，单位毫秒
 * @returns {Function} - 节流处理过的函数
 */
export function throttle(fn, delay = 300) {
	let timer = null
	return function (...args) {
		if (!timer) {
			timer = setTimeout(() => {
				fn.apply(this, args)
				timer = null
			}, delay)
		}
	}
}

/**
 * 组件动态导入 - 用于按需加载组件
 * @param {String} componentPath - 组件路径
 * @param {String} componentName - 组件名称
 * @returns {Promise} - 动态导入的组件
 */
export function lazyComponent(componentPath, componentName) {
	return () => import(`../components/${componentPath}.vue`)
}

/**
 * 性能监控 - 收集性能指标
 * @returns {Object} - 页面性能指标
 */
export function collectPerformanceMetrics() {
	if (!window.performance) return {}

	const { timing } = window.performance

	// 如果浏览器不支持，返回空对象
	if (!timing) return {}

	// 计算关键性能指标
	const metrics = {
		// DNS解析时间
		dns: timing.domainLookupEnd - timing.domainLookupStart,
		// TCP连接时间
		tcp: timing.connectEnd - timing.connectStart,
		// 请求响应时间
		request: timing.responseEnd - timing.requestStart,
		// DOM解析时间
		dom: timing.domComplete - timing.domLoading,
		// 页面加载总时间
		load: timing.loadEventEnd - timing.navigationStart,
		// 首次渲染时间
		fpt: timing.responseEnd - timing.navigationStart,
		// 首次可交互时间
		tti: timing.domInteractive - timing.navigationStart,
	}

	return metrics
}

/**
 * 资源预加载
 * @param {Array} resources - 资源URL数组
 * @param {String} type - 资源类型: image, script, style, font
 */
export function preloadResources(resources, type = 'image') {
	if (!Array.isArray(resources) || resources.length === 0) return

	const typeMap = {
		image: 'image',
		script: 'script',
		style: 'style',
		font: 'font',
	}

	const asType = typeMap[type] || 'fetch'

	resources.forEach(url => {
		const link = document.createElement('link')
		link.rel = 'preload'
		link.href = url
		link.as = asType

		if (type === 'font') {
			link.crossOrigin = 'anonymous'
		}

		document.head.appendChild(link)
	})
}
